<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
    >
      <!-- <el-form-item>
          <treeselect v-model="queryParams.adCode" :options="xzqhOptions" :normalizer="normalizer"
              :show-count="true" placeholder="行政区划" />
      </el-form-item> -->
      <el-form-item>
        <el-select
          style="width: 280px"
          v-model="queryParams.statCd"
          filterable
          clearable
          placeholder="测站名称"
          size="small"
        >
          <el-option
            v-for="item in czlist"
            :key="item.statCd"
            :label="item.statNm"
            :value="item.statCd"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          style="width: 280px"
          v-model="queryParams.devNo"
          filterable
          clearable
          placeholder="设备号"
          size="small"
        >
          <el-option
            v-for="item in cmblist"
            :key="item.devNo"
            :label="item.devNo"
            :value="item.devNo"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryParams.runningState"
          placeholder="是否在线"
          clearable
          size="small"
        >
          <el-option key="1" label="在线" value="0" />
          <el-option key="4" label="离线" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryParams.statId"
          placeholder="请选择建设属性"
          clearable
        >
          <el-option
            v-for="dict in dict.type.stat_id"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="wmList" stripe>
      <el-table-column label="序号" type="index" align="center" width="50" />
      <el-table-column label="名称" prop="statNm" min-width="200">
      </el-table-column>
      <el-table-column label="状态" align="center" prop="runningState">
        <template slot-scope="scope">
          <span v-show="scope.row.runningState == 0" style="color: #2d8c34"
            >在线</span
          >
          <span v-show="scope.row.runningState == 1" style="color: #919294"
            >离线</span
          >
          <span v-show="scope.row.runningState == 2" style="color: #919294"
            >离线</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="最近拍照"
        align="center"
        prop="picUrl"
        width="180"
      >
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.picUrl"
            style="width: 56px; height: 32px"
            :src="scope.row.picUrl"
            :preview-src-list="srcList"
            @click="preView(scope.row.picUrl)"
          ></el-image>
          <span v-else>暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column
        label="当日图片数"
        align="center"
        prop="dayOfPic"
        min-width="110"
      >
      </el-table-column>
      <el-table-column
        label="上传时间"
        align="center"
        prop="uploadTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.uploadTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="信息详情"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <img
            @click="sqjcinfo(scope.row)"
            style="cursor: pointer; margin-top: 6px"
            src="../../../assets/icons/sjjgicon.png"
          />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      :title="statNm + '监拍图片'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="900px"
    >
      <himg v-if="dialogVisible" :czid="statCd"></himg>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { cameraStationPicRList } from "@/api/waterManagement/StationPicR";
import { selStStationBByType } from "@/api/datam/StStationB";
import { deviceListByType } from "@/api/datam/CmDeviceB";
import himg from "./hisimg.vue";
export default {
  name: "cameraStationPic",
  dicts: ["stat_id"],
  components: { himg },
  data() {
    return {
      //测站统计
      cztgitem: {
        znum: 0,
        zcnum: 0,
        lxnum: 0,
      },
      // 行政区划树选项
      xzqhOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      wmList: [],
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        adCode: undefined,
        runningState: undefined,
        statNm: undefined,
      },
      dialogVisible: false,
      statCd: "",
      statNm: "",
      czlist: [],
      cmblist: [],
    };
  },
  created() {
    this.getList();
    this.loadczlist();
    this.loadcmblist();
  },
  methods: {
    loadcmblist() {
      deviceListByType({ statTypes: 8 }).then((response) => {
        let cmblist = response.rows;
        this.cmblist = cmblist;
      });
    },
    loadczlist() {
      selStStationBByType({ statTypes: 8 }).then((response) => {
        let clist = response.rows;
        this.czlist = clist;
      });
    },
    preView(val) {
      this.srcList = [];
      this.srcList.push(val);
    },
    sqjcinfo(irow) {
      const statCd = irow.statCd;
      this.statCd = statCd;
      this.statNm = irow.statNm;
      this.dialogVisible = true;
    },
    /** 查询测站列表 */
    getList() {
      this.loading = true;
      cameraStationPicRList(this.queryParams).then((response) => {
        this.wmList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.adCode,
        label: node.adName,
        children: node.children,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.postId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-form-item--medium .el-form-item__content {
  line-height: 30px;
}
</style>
